<div class="row">
    <p id="list-title">{{.PageName}}</p>
</div>

<form enctype="multipart/form-data" id="productProductForm" action="{{.URL}}{{.RecordID}}?action={{.Action}}" method="post" class="post-form form-horizontal {{if .Readonly}}form-disabled{{else}}form-edit{{end}}" role="form">
    <div class="row title-action">
        {{if .RecordID}} {{if .Readonly}}
        <a href="{{.URL}}{{.RecordID}}?action=edit" class="btn btn-success fa fa-pencil pull-left form-edit-btn">&nbsp编辑</a>
        <a href="{{.URL}}?action=create" type="buttom" class="btn btn-success fa fa-plus pull-left form-create-btn">&nbsp新建</a>{{end}} {{end}}
        <button type="submit" form="productProductForm" class="btn btn-primary fa fa-save pull-left form-save-btn">&nbsp保存</button>
        <a href="{{.URL}}{{if .RecordID}}{{.RecordID}}?action=detail{{end}}" class="btn btn-danger fa fa-remove  pull-left form-cancel-btn">&nbsp取消</a>
        <a href="{{.URL}}" class="btn btn-info fa fa-list pull-left">&nbsp列表</a>
    </div>
    <div class="row">
        <nav class="navbar navbar-default navbar-form-top" role="navigation">
            <div class="form-button-action pull-left">
            </div>
        </nav>
    </div>
    {{ .xsrf }} {{if .RecordID}}
    <input type="hidden" data-type="int" name="recordID" id="record-id" class="{{.FormField}}" value="{{.RecordID}}">
    <input type="hidden" data-type="string" name="_method" class="{{.FormField}}" value="PUT"> {{end}}
    <div class="row">
        <div class="col-md-4 text-center">
            <div class="preview ">

                <div id="vertical" class="bigImg">

                    <img src="/static/images/test/mid/05.jpg" alt="" id="midimg" />

                    <div style="display:none;" id="winSelector"></div>

                </div>
                <!--bigImg end-->

                <div class="smallImg">

                    <div class="scrollbutton smallImgUp disabled"></div>

                    <div id="imageMenu">

                        <ul>

                            <li id="onlickImg"><img src="/static/images/test/small/05.jpg" alt="洋妞" /></li>

                            <li><img src="/static/images/test/small/02.jpg" alt="洋妞" /></li>

                            <li><img src="/static/images/test/small/03.jpg" alt="洋妞" /></li>

                            <li><img src="/static/images/test/small/04.jpg" alt="洋妞" /></li>

                            <li><img src="/static/images/test/small/01.jpg" alt="洋妞" /></li>

                            <li><img src="/static/images/test/small/06.jpg" alt="洋妞" /></li>

                            <li><img src="/static/images/test/small/04.jpg" alt="洋妞" /></li>

                        </ul>

                    </div>

                    <div class="scrollbutton smallImgDown"></div>

                </div>
                <!--smallImg end-->

                <div id="bigView" style="display:none;"><img width="800" height="800" alt="" src="" /></div>

            </div>
        </div>
        <div class="col-md-8">
            <fieldset>
                <legend>基本信息</legend>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="ProductTemplateID" class="col-md-2 control-label label-start">款式名称<span class="required-input">&nbsp*</span></label>
                            <div class="col-md-10">
                                <p class="p-form-control">{{if and .Product .Product.ProductTemplate}}<span style="color:#337ab7;">[{{.Product.ProductTemplate.DefaultCode}}]</span> {{.Product.ProductTemplate.Name}} {{end}}</p>
                                <select data-type="int" name="ProductTemplateID" id="ProductTemplateID" class="form-control select-product-template {{.FormField}}">
                                    {{if and .Product .Product.ProductTemplate}}
                                    <option value="{{.Product.ProductTemplate.ID}}" data-defaultcode="{{.Product.ProductTemplate.DefaultCode}}" selected="selected">{{.Product.ProductTemplate.Name}}</option>
                                    {{end}}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="name" class="col-md-2 control-label label-start">规格名称<span class="required-input">&nbsp*</span></label>
                            <div class="col-md-10">
                                <p class="p-form-control">{{if .Product}} {{.Product.Name}} {{end}}</p>
                                <input data-type="string" data-oldvalue="{{.Product.Name}}" class="form-control {{.FormField}}" id="name" name="Name" type="text" {{if .Product}} value="{{.Product.Name}}" {{end}} />
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="Productgroup" class="col-md-2 control-label label-start">属性值 </label>
                            <div class="col-md-10">
                                <p class="p-form-control">{{if and .Product .Product.AttributeValues}} {{range $j,$attrVal := .Product.AttributeValues}}<a class='display-block label label-primary'>{{$attrVal.Name}}</a> {{end}}{{end}}</p>
                                <select data-type='array_int' data-name='AttributeValueIds' name='AttributeValueIds' id='product-attributevalues' data-oldValue="{{if and .Product .Product.AttributeValues}}{{range $j,$attrVal :=.Product.AttributeValues}}{{$attrVal.ID}},{{end}}{{end}}"
                                    multiple='multiple' class='{{.FormField}} form-line-cell-edit form-control select-product-product-attribute-value'>
                                    {{if and .Product  .Product.AttributeValues}} 
                                        {{range $j,$attrVal :=  .Product.AttributeValues}}
                                            <option value="{{$attrVal.ID}}" selected="selected">{{$attrVal.Name}}</option>
                                        {{end}}
                                    {{end}}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="active" class="col-md-4 control-label ">有效</label>
                            <div class="col-md-8 ">
                                <input data-type="bool" name="Active" data-oldvalue="{{.Product.Active}}" id="active" class="form-control form-checkbox {{.FormField}}" {{if and .Product .Product.Active}}{{if eq .Product.Active true}}checked="checked" {{end}} {{else}}checked="checked"
                                    {{end}}type="checkbox">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="saleok" class="col-md-4 control-label ">可销售</label>
                            <div class="col-md-8 ">
                                <input data-type="bool" name="SaleOk" data-oldvalue="{{.Product.SaleOk}}" id="saleok" class="form-control form-checkbox {{.FormField}}" {{if and .Product .Product.SaleOk}}{{if eq .Product.SaleOk true}}checked="checked" {{end}} {{else}}checked="checked"
                                    {{end}} type="checkbox">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="type" class="col-md-4 control-label label-start">产品规格类型</label>
                            <div class="col-md-8">
                                <input data-type="string" class="{{.FormField}} input-radio" {{if and .Product .Product.ProductType}} data-oldvalue="{{.Product.ProductType}}" {{else}}data-oldvalue="stock" {{end}} type="radio" id="stock-radio" value="stock" name="ProductType">
                                <label class="input-radio-label" for="stock-radio">库存商品</label>
                                <input data-type="string" class="{{.FormField}} input-radio" {{if and .Product .Product.ProductType}} data-oldvalue="{{.Product.ProductType}}" {{else}}data-oldvalue="stock" {{end}} type="radio" id="consume-radio" value="consume" name="ProductType">
                                <label class="input-radio-label" for="consume-radio">消耗品</label>
                                <input data-type="string" class="{{.FormField}} input-radio" {{if and .Product .Product.ProductType}} data-oldvalue="{{.Product.ProductType}}" {{else}}data-oldvalue="stock" {{end}} type="radio" id="service-radio" value="service" name="ProductType">
                                <label class="input-radio-label" for="service-radio">服务</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="standardPrice" class="col-md-4 control-label label-start">成本价格<span>&nbsp</span></label>
                            <div class="col-md-8">
                                <p class="p-form-control">{{if .Product}} {{.Product.StandardPrice}} {{end}}</p>
                                <input data-type="float" data-oldvalue="{{.Product.StandardPrice}}" class="form-control {{.FormField}}" name="StandardPrice" type="text" {{if .Product}} value="{{.Product.StandardPrice}}" {{end}} />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="defaultCode" class="col-md-4 control-label label-start">规格编码</label>
                            <div class="col-md-8">
                                {{if .Product}}
                                <p> {{.Product.DefaultCode}}</p>{{else}}
                                <p style="color: gray">自动生成</p> {{end}}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="category" class="col-md-4 control-label label-start">款式类别<span class="required-input">&nbsp*</span></label>
                            <div class="col-md-8">
                                <p class="p-form-control">{{if and .Product .Product.Category}} {{.Product.Category.Name}} {{end}}</p>
                                <select data-type="int" {{if and .Product .Product.Category}} data-oldvalue="{{.Product.Category.ID}}" {{end}} name="Category" id="category" class="{{.FormField}} form-control select-product-category">
                                    {{if and .Product .Product.Category}}
                                    <option value="{{.Product.Category.ID}}" selected="selected">{{.Product.Category.Name}}</option>
                                    {{end}}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <fieldset>
                            <legend>销售单位</legend>
                            <div class="form-group">
                                <label for="firstSaleUom" class="col-md-4 control-label label-start">销售单位1<span class="required-input">&nbsp*</span></label>
                                <div class="col-md-8">
                                    <p class="p-form-control">{{if and .Product .Product.FirstSaleUom}} {{.Product.FirstSaleUom.Name}} {{end}}</p>
                                    <select data-type="int" {{if and .Product .Product.FirstSaleUom}} data-oldvalue="{{.Product.FirstSaleUom.ID}}" {{end}} name="FirstSaleUom" id="firstSaleUom" class="{{.FormField}} form-control select-product-uom">
                                        {{if and .Product .Product.FirstSaleUom}} 
                                        <option value="{{.Product.FirstSaleUom.ID}}" selected="selected">{{.Product.FirstSaleUom.Name}}</option>
                                        {{end}}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="secondSaleUom" class="col-md-4 control-label label-start">销售单位2<span>&nbsp</span></label>
                                <div class="col-md-8">
                                    <p class="p-form-control">{{if and .Product .Product.SecondSaleUom}} {{.Product.SecondSaleUom.Name}} {{end}}</p>
                                    <select data-type="int" {{if and .Product .Product.SecondSaleUom}} data-oldvalue="{{.Product.SecondSaleUom.ID}}" {{end}} name="SecondSaleUom" id="secondSaleUom" class="{{.FormField}} form-control select-product-uom">
                                        {{if and .Product .Product.SecondSaleUom}}
                                            <option value="{{.Product.SecondSaleUom.ID}}" selected="selected">{{.Product.SecondSaleUom.Name}}</option>
                                        {{end}}
                                    </select>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="col-md-6">
                        <fieldset>
                            <legend>采购单位</legend>
                            <div class="form-group">
                                <label for="firstPurchaseUom" class="col-md-4 control-label label-start">采购单位1<span class="required-input">&nbsp*</span></label>
                                <div class="col-md-8">
                                    <p class="p-form-control">{{if and .Product .Product.FirstPurchaseUom}} {{.Product.FirstPurchaseUom.Name}} {{end}}</p>
                                    <select data-type="int" {{if and .Product .Product.FirstPurchaseUom}} data-oldvalue="{{.Product.FirstPurchaseUom.ID}}" {{end}} name="FirstPurchaseUom" id="firstPurchaseUom" class="{{.FormField}} form-control select-product-uom">
                                        {{if and .Product .Product.FirstPurchaseUom}} 
                                            <option value="{{.Product.FirstPurchaseUom.ID}}" selected="selected">{{.Product.FirstPurchaseUom.Name}}</option>
                                        {{end}}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="secondPurchaseUom" class="col-md-4 control-label label-start">采购单位2<span>&nbsp</span></label>
                                <div class="col-md-8">
                                    <p class="p-form-control">{{if and .Product .Product.SecondPurchaseUom}} {{.Product.SecondPurchaseUom.Name}} {{end}}</p>
                                    <select data-type="int" {{if and .Product .Product.SecondPurchaseUom}} data-oldvalue="{{.Product.SecondPurchaseUom.ID}}" {{end}} name="SecondPurchaseUom" id="secondPurchaseUom" class="{{.FormField}} form-control select-product-uom">
                                        {{if and .Product .Product.SecondPurchaseUom}}
                                            <option value="{{.Product.SecondPurchaseUom.ID}}" selected="selected">{{.Product.SecondPurchaseUom.Name}}</option>
                                        {{end}}
                                    </select>
                                </div>
                            </div>
                        </fieldset>
                        </di>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>

    <ul class="nav nav-tabs" role="tablist" id="product-tab">
        <li role="presentation" class="active"><a data-toggle="tab" href="#inventory">库存</a></li>
        <li role="presentation"><a data-toggle="tab" href="#supplier">供应商</a></li>
        {{if .RecordID}}
        <li role="presentation"><a data-toggle="tab" href="#productImages">图片</a></li>
        {{end}}
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade" id="inventory">库存</div>
        <div class="tab-pane fade" id="supplier">供应商</div>
        {{if .RecordID}}
        <div class="tab-pane fade" id="productImages">
            <!--显示已经有的图片-->
            {{if and .Product .Product.BigImages}} {{range .Product.BigImages}}
            <div class="row">
                <div class="col-xs-6 col-md-3">
                    <a href="#" class="thumbnail">
                        <img class="click-modal-view" src="" data-src="{{.imgSrc}}" alt="...">
                    </a>
                </div>
            </div>
            {{end}} {{end}}
            <input id="product-images" name="productImages" type="file" multiple>
        </div>
        {{end}}
    </div>
</form>
{{if .RecordID}}
<div class="file-zoom-dialog modal fade" id="productImagesModal" tabindex="-1" role="dialog" aria-labelledby="productImagesModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="kv-zoom-actions pull-right">
                    <!--<button type="button" class="btn btn-default btn-header-toggle btn-toggleheader" title="缩放" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="glyphicon glyphicon-resize-vertical"></i></button>
                    <button type="button" class="btn btn-default btn-fullscreen" title="全屏" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="glyphicon glyphicon-fullscreen"></i></button>
                    <button type="button" class="btn btn-default btn-borderless" title="无边界模式" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="glyphicon glyphicon-resize-full"></i></button>-->
                    <button type="button" class="btn btn-default btn-close" title="关闭当前预览" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove"></i></button>
                </div>
                <h3 class="modal-title"> <small><span class="kv-zoom-title text-primary" >[{{.Product.DefaultCode}}]{{.Product.Name}}</span></small></h3>
            </div>
            <div class="modal-body">
                <div id="productImagesCarousel" class="carousel slide">
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a type="button" class="carousel-control btn-navigate left" data-slide="prev" href="#productImagesCarousel" title="预览上一个文件"><i class="glyphicon glyphicon-triangle-left"></i></a>
                    <a type="button" class="carousel-control  btn-navigate right" data-slide="next" href="#productImagesCarousel" title="预览上一个文件"><i class="glyphicon glyphicon-triangle-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}